import React from "react";
import {
	Modal,
	View,
	Text,
	StyleSheet,
	GestureResponderEvent,
} from "react-native";
import TextButton from "./TextButton";
import IconButton from "./IconButton";

export interface ModalPropsType {
	title?: string;
	content: string;
	cancelText?: string;
	confirmText: string;
	onCancel?: (event?: GestureResponderEvent) => void;
	onConfirm: (event: GestureResponderEvent) => void;
    hideModal:() => void;
}

// 工厂函数来创建 Modal 样式
function createCustomModal(props: ModalPropsType) {
	const {
		title = "", // 弹框标题
		content, // 弹框内容
		cancelText = "", // 取消文字按钮
		confirmText, // 确定文字按钮
		onCancel = () => {}, // 点击取消文字回调
		onConfirm, // 点击确定文字回调
        hideModal  // 必定传递关闭弹框回调
	} = props;
	return (
		<View style={styles.modalContainer}>
			{title && <Text style={styles.title}>{title}</Text>}
			<Text style={styles.content}>{content}</Text>
			<View style={styles.buttonContainer}>
				{cancelText && (
					<View style={{ flex: 1, paddingRight: 14 }}>
						<TextButton
							backgroundColor="#f5f4f2"
							buttonText={cancelText}
							onPress={onCancel}
						/>
					</View>
				)}
				<View style={[{ flex: 1 }, cancelText ? { paddingLeft: 14 } : {}]}>
					<TextButton
						backgroundColor="#fff69c"
						buttonText={confirmText}
						onPress={onConfirm}
					/>
				</View>
			</View>
            <View style={styles.icon}>
                <IconButton path={require('@/assets/common/close.png')} onPress={hideModal} />
            </View>
		</View>
	);
}

const GlobalModal = (props: {
	visible: boolean;
	modalProps: ModalPropsType;
}) => {
	const { visible, modalProps } = props;
	return (
		<Modal visible={visible} transparent={true} animationType="slide">
			<View style={styles.overlay}>{createCustomModal(modalProps)}</View>
		</Modal>
	);
};

export default GlobalModal;

const styles = StyleSheet.create({
	overlay: {
		flex: 1,
		justifyContent: "center",
		alignItems: "center",
		backgroundColor: "rgba(0, 0, 0, 0.3)", // 半透明背景
	},
	modalContainer: {
		width: "88%",
		padding: 24,
		backgroundColor: "white",
		borderRadius: 16,
		shadowColor: "#999",
		shadowOffset: { width: 0, height: 4 },
		shadowOpacity: 0.8,
		shadowRadius: 2,
		elevation: 5,
	},
	title: {
		fontSize: 16,
		fontWeight: "bold",
		marginBottom: 16,
		textAlign: "center",
	},
	content: {
		fontSize: 13,
		marginBottom: 20,
		fontWeight: "400",
	},
	buttonContainer: {
		flexDirection: "row",
		justifyContent: "space-between",
		width: "100%",
	},
    icon:{
        position:"absolute",
        top:20,
        right:20
    }
});
